<template>
  <table class="table">
    <thead>
      <tr>
        <th>商品清单如下</th>
        <th>价格</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody>
      <MaidianTbody v-for="(item, index) in arr" :key="index" :item="item"></MaidianTbody>
    </tbody>
    <tfoot>
      <tr>
        <td>总价</td>
        <td>{{ sum }}</td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
import MaidianTbody from '@/components/Day/Day3/Maidian/MaidianTbody.vue'
export default {
  components: {
    MaidianTbody
  },
  data() {
    return {
      arr: [
        {
          shopName: '可比克薯片',
          price: 5.5,
          count: 0
        },
        {
          shopName: '草莓酱',
          price: 3.5,
          count: 0
        },
        {
          shopName: '红烧肉',
          price: 55,
          count: 0
        },
        {
          shopName: '方便面',
          price: 12,
          count: 0
        }
      ]
    }
  },
  computed: {
    sum() {
      return this.arr.reduce((acc, val) => (acc += val.price * val.count), 0)
    }
  }
}
</script>

<style></style>
